To adjust the layout of your login form and make it more reasonable and visually appealing, I have made some modifications to your component. These adjustments ensure that the login form is centered vertically and horizontally, and the styles are clean and consistent.

Here’s the updated component:

```vue
<template>
  <div class="login-container">
    <el-form
      class="login-form"
      ref="loginFormRef"
      :model="loginForm"
      :rules="loginRules"
    >
      <div class="title-container">
        <!-- Uncomment these lines if you want to use them -->
         <h3 class="title">用户登录</h3>
        <!-- <lang-select class="lang-select" effect="light"></lang-select> -->
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <SvgIcon icon="user" />

        </span>
        <el-input
          placeholder="username"
          name="username"
          type="text"
          v-model="loginForm.username"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <SvgIcon icon="password" />

        </span>
        <el-input
          placeholder="password"
          name="password"
          :type="passwordType"
          v-model="loginForm.password"
        />
        <span class="show-pwd" @click="onChangePwdType">
          <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <el-button
        type="primary"
        style="width: 150px; margin-bottom: 30px"
        :loading="loading"
        @click="handleLogin"
      >
        登录
      </el-button>

      <!-- Uncomment this line if you want to use it -->
      <!-- <div class="tips" v-html="$t('msg.login.desc')"></div> -->
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import router from '@/router'
// import SvgIcon from '@/components/SvgIcon/index'

const loading = ref(false)
const store = useStore()
const loginFormRef = ref(null)
const loginForm = ref({
  username: 'super-admin',
  password: '123456'
})
const passwordType = ref('password')

const loginRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})

const handleLogin = () => {
  loginFormRef.value.validate(valid => {
    if (!valid) return

    loading.value = true
    store
      .dispatch('user/login', loginForm.value)
      .then(resp => {
        loading.value = false
        console.log("登录信息", resp)
        router.push('/')
        // TODO: 登录后操作
      })
      .catch(err => {
        console.log(err)
        loading.value = false
      })
  })
}

const onChangePwdType = () => {
  passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #fff;

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
}

.login-form {
  width: 520px;
  max-width: 100%;
  padding: 35px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-form-item:first-of-type {
    margin-top: 20px;
  }

  .svg-container {
    padding: 6px 10px;
    color: $dark_gray;
    vertical-align: middle;
  }

  .el-input {
    width: calc(100% - 50px);

    input {
      background: transparent;
      border: none;
      color: $light_gray;
      padding: 12px;
    }
  }

  .title-container {
    text-align: center;
    margin-bottom: 40px;

    .title {
      font-size: 26px;
      color: $light_gray;
      font-weight: bold;
    }

    .lang-select {
      margin-top: 10px;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
